@extends('Admin.index')

@section('content')

    <div class="app-third-sidebar">
        <nav class="ui-nav " style="display: block;">
            <ul>
                <li>
                    <a href="/admin/role/group"><span>角色组</span></a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="wrapper">

        <div class="row">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-md-2">
                        <button class="btn btn-success" type="button" onclick="RoleGroup.edit(0);">添加角色组</button>
                    </div>
                    <div class="col-md-10">
                        <form class="form-inline" id="search-form" onsubmit="return false;">

                            <div class="input-group">
                                <input type="text" class="form-control" name="roleGroupName" placeholder="请输入角色组名称">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" name="search" type="button">查询</button>
                                     <button class="btn btn-warning" name="to-reset" type="button">重置</button>
                                </span>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
        <br>

        <div class="row">
            <div class="col-lg-12">
                <table id="table"></table>
            </div>
        </div>

    </div>

@endsection

@section('js')
    <script>

        var bootstrap_table_ajax_url = '/admin/role/group/search';

        $('#table').bootstrapTable({
            classes: 'table table-hover', //bootstrap的表格样式
            sidePagination: 'server', //获取数据方式【从服务器获取数据】
            pagination: true, //分页
            height: $(window).height() - 200, //表格高度
            pageNumber: 1, //页码【第X页】
            pageSize: 10, //每页显示多少条数据
            queryParamsType: 'limit',
            queryParams: function (params) {
                var dt = E.getFormValues('search-form');
                $.extend(params, dt);
                return params;
            },

            url: bootstrap_table_ajax_url,//ajax链接
            sortName: 'roleGroupID', //排序字段
            sortOrder: 'DESC',//排序方式
            columns: [ //字段
                { title: '操作', field: 'operation', align: 'center', width: '100px' },
                { title: '角色组名称', field: 'roleGroupName', align: 'left', width: '200px'  },
                { title: '备注',  field: 'memo', align: 'left' }
            ]

        });

        var RoleGroup = {

            layer_index: 0,

            edit: function (group_id) {

                var html = '<form id="group-form" onsubmit="return false;" class="form-horizontal" role="form">';
                html += '<input type="hidden" name="roleGroupID" id="roleGroupID" value="0">';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="roleGroupName"><span class="red pr5">*</span> 角色组名称：</label>';
                html += '<div class="col-sm-9">';
                html += '<input class="form-control" type="text" id="roleGroupName" name="roleGroupName" maxlength="20" value="" placeholder="请输入角色组名称">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="memo">备注：</label>';
                html += '<div class="col-sm-9">';
                html += '<textarea class="form-control" name="memo" id="memo" placeholder="请输入备注"></textarea>';
                html += '</div>';
                html += '</div>';

                html += '</form>';

                this.layer_index = layer.open({
                    title: group_id == 0 ? '新增角色组' : '修改角色组',
                    type: 1,
                    offset: '50px',
                    area: '450px',
                    scrollbar: false,
                    content: html,
                    btn: ['保存', '取消'],
                    yes: function () {

                        var dt = E.getFormValues('group-form');

                        if (dt.roleGroupName == '') {
                            layer.alert('请输入角色组名称', {icon: 2, offset: '70px'});
                            return false;
                        }

                        E.ajax({
                            type: 'POST',
                            url: '/admin/role/group/store',
                            data: dt,
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.alert('角色组保存成功', {icon: 1, offset: '70px', time: 1500});
                                    if (dt.roleGroupID > 0) {
                                        layer.close(RoleGroup.layer_index);
                                    } else {
                                        $('#roleGroupName').val('');
                                        $('#memo').val('');
                                    }
                                    $('#table').bootstrapTable('refresh');
                                } else {
                                    layer.alert(res.message, {icon: 2, offset: '70px'});
                                }
                            }
                        });

                    }
                });

                $('#roleGroupName').focus();

                if (group_id > 0) {

                    E.ajax({
                        type: 'get',
                        url: '/admin/role/group/' + group_id,
                        success: function (res) {
                            if (res.code == 200) {
                                $('#roleGroupID').val(res.data.roleGroupID);
                                $('#roleGroupName').val(res.data.roleGroupName);
                                $('#memo').val(res.data.memo);
                            }
                        }
                    });

                }

            },

            del: function (group_id) {

                layer.confirm('您确认要删除该角色组吗？', {icon: 3,offset:"70px"}, function (index) {

                    layer.close(index);

                    E.ajax({
                        type: 'get',
                        url: '/admin/role/group/delete/' + group_id,
                        success: function (res) {
                            if (res.code == 200) {
                                layer.alert('角色组删除成功', {icon: 1, offset: '70px', time: 1500});
                                $('#table').bootstrapTable('refresh');
                            } else {
                                layer.alert(res.message, {icon: 2, offset: '70px'});
                            }
                        }
                    });

                });

            }

        };

    </script>
@endsection